<template>
  <view class="property-box">
    <view class="avatrar">
      <u-image :src="prefixURL(info.avatar)" shape="circle" width="180rpx" height="180rpx"></u-image>
    </view>
    <u-text align="center" :text="info.nickname" margin="24rpx 0" size="18" color="#000" bold></u-text>
    <view class="u-flex-y-center u-flex-between action-box" style="padding:80rpx 140rpx 40rpx;">
      <view @click="handleCall">
        <image src="@/static/images/04_1w.png" mode=""></image>
        <view>打电话</view>
      </view>
      <view>
        <image src="@/static/images/04_1w.png" mode=""></image>
        <view>发消息</view>
      </view>

    </view>
  </view>
  <view class="property-info">
    <up-cell-group :border="false">
      <up-cell title="姓名" :value="info.real_name"></up-cell>
      <up-cell title="手机号码" :value="info.mobile"></up-cell>
      <up-cell title="备注" :border="false">
        <template #value>
          <u-input border="none" input-align="right" placeholder="请输入备注信息" v-model="info.zygw_remark"
            @blur="_zygw_save"></u-input>
        </template>
      </up-cell>
    </up-cell-group>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { zygw_info, zygw_save } from '../../config/api';
  import { prefixURL } from '../../util/util';
  const info = ref({})
  onMounted(() => {
    _zygw_info()
  })
  const handleCall = () => {
    uni.makePhoneCall({
      phoneNumber: info.value.mobile
    })
  }
  // 置业顾问备注
  const _zygw_save = () => {
    zygw_save({ zygw_remark: info.value.zygw_remark }).then(res => {
      console.log(res)
    })
  }
  // 置业顾问
  const _zygw_info = () => {
    zygw_info().then(res => {
      info.value = res.data
    })
  }
</script>

<style scoped lang="scss">
  .property-box {
    background: #fff;
    padding-top: 78rpx;

    .avatrar {
      width: 180rpx;
      height: 180rpx;
      line-height: 180rpx;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      font-size: 64rpx;
      background: #F87610;
      margin: auto;
    }

    .action-box {
      color: #000;
      font-size: 30rpx;
      font-weight: 500;

      image {
        width: 40rpx;
        height: 42rpx;
        margin: auto;
        margin-bottom: 26rpx;
        display: block;
      }
    }
  }

  .property-info {
    padding: 0 24rpx;
    background: #fff;
    margin-top: 20rpx;
  }
</style>